<template>
  <a-table
      :columns="columns"
      :data-source="problemList"
      :pagination="false"
      :scroll="{x : 500 }"
      :loading="loading"
  >
  <template #bodyCell="{ column, text ,record}">
    <template v-if="column.dataIndex === 'submit'">
      <div style="position: relative;top: 10px" >
        <a-progress  :percent="getPercent(record.acSum,record.submitSum)" size="small"  status="active" />
        <div style="position: absolute;top: -16px;left: 0">
          <span style="font-size: 16px;margin-left: 20px;font-weight: 600">{{record.acSum}}</span>
          <span style="font-size: 12px;">/{{record.submitSum}}</span>
        </div>
      </div>
    </template>
    <template v-else-if="column.dataIndex === 'title'">
      <a-tooltip placement="top">
        <template #title>
          {{text}}
        </template>
        <span v-if="record.status == 1" style="color: red;cursor: pointer;margin-right: 3px" href="#" @click="gotoProblem(record)">
          {{ text }}
          <CloseOutlined  />
        </span  >
        <span v-else-if="record.status == 2" style="color: blue;cursor: pointer;margin-right: 3px" href="#" @click="gotoProblem(record)">
          {{ text }}
          <CheckOutlined  />
        </span  >
        <span v-else style="color: #2f6ea7;cursor: pointer;margin-right: 3px" href="#" @click="gotoProblem(record)">
          {{ text }}
        </span >
      </a-tooltip>
    </template>
<!--    <template v-else-if="column.dataIndex === 'ioScore'">-->
<!--      <span>{{text || '//'}}</span>-->
<!--    </template>-->
    <template v-else>
      <span>{{text}}</span>
    </template>
  </template>
  </a-table>
</template>

<script setup lang="ts">

import {CloseOutlined,CheckOutlined} from '@ant-design/icons-vue';
import {h, ref} from "vue";
import {getProblemList} from "@/api/contest";
import {MenuProps} from "ant-design-vue";
import router from "@/router";
const contestId = ref()
const problemList = ref()
const loading  = ref<boolean>(true)
onMounted(async () => {
  loading.value = true;
  contestId.value = useRoute().params.contestId;
  await initProblemList();
  loading.value = false;
})

const initProblemList = async () => {
  problemList.value =  (await getProblemList(contestId.value)).data;
  if(problemList.value != null && problemList.value.length > 0 && problemList.value[0].ioScore != null)
    columns.push( {
      title: '分数',
      dataIndex: 'ioScore',
    })
  columns.push({
    title: '通过率',
    dataIndex: 'submit',
    width:150
  })
}

const columns = reactive([
  {
    title: '标号',
    dataIndex: 'seq',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },

]);

const getPercent = (a,b) => {
  if(b == 0)
    return 0;
  return  ((a/b) *100).toFixed(0);
}
const gotoProblem = (e) => {
  router.push({
    path:`/contestIn/problem/${contestId.value}/${e.pid}`
  })
}
</script>

<style scoped>

</style>
